<script setup>
import IconCaretDown from '@arco-design/web-vue/es/icon';
import IconRight from '@arco-design/web-vue/es/icon';
import ArcoVueIcon from "@arco-design/web-vue/es/icon";
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import ProfessionComponents from "@/views/webLayout/professionComponents.vue";
import ServiceComponents from "@/views/webLayout/serviceComponents.vue";

const router = useRouter()
const active = ref(0);
onMounted(() => {
})
const hoverChange = (num) => {
  active.value = num;
}
</script>
<template>
  <div class="wid">
    <div class="nav">
      <ul>
        <li class="hover" style="width: 240px;" @mouseover="hoverChange(1)">
          <img p-r="30px" style="position: relative;top:2px;" src="../../assets/menu_2.png" alt="">
          <a href="/check">行业检测</a>
          <component is="icon-caret-down"/>
        </li>
        <li @mouseover="hoverChange(2)">
          <a href="/service">服务项目</a>
          <component is="icon-caret-down"/>
        </li>
        <li class="" @mouseover="hoverChange(0)"><a href="/guestbook" class="text-18px"> <!--<b style="color: yellow">★</b> -->咨询报价</a></li>
        <li @mouseover="hoverChange(0)"><a href="/about">关于我们</a>
          <component is="icon-caret-down"/>
          <ol>
            <li @click="$router.push('/company')">公司简介</li>
            <li @click="$router.push('/contact')">联系我们</li>
          </ol>
        </li>
        <li @mouseover="hoverChange(0)"><a href="/news">北检资讯</a>
          <component is="icon-caret-down"/>
          <ol>
            <li @click="$router.push('/news?typeId=4')">行业动态</li>
            <li @click="$router.push('/news?typeId=6')">行业资讯</li>
          </ol>
        </li>
        <li class="" @mouseover="hoverChange(0)"><a href="/cert" ><!-- <b style="color: yellow">★</b>--> 报告查询</a></li>
      </ul>
    </div>
    <profession-components @mouseleave="hoverChange(0)"/>
    <div class="nav_con" v-show="active===2" @mouseleave="hoverChange(0)">
      <service-components @mouseleave="hoverChange(0)"/>
    </div>
  </div>
</template>

<style scoped lang="less">
.nav { height: 40px;position: relative;
  z-index: 999;

  ul {
    display: flex;

    > li {
      width: 200px;height: 40px;line-height: 40px;text-align: center;

      g
      a {
        color: #000000;
      }

      &:hover, &.hover {
        background: #1f2c5c;font-size: 16px;

        a, svg {
          color: #fff;
        }
      }

      > ol {
        display: none;
        width: 200px; box-shadow: 0 10px 10px rgba(0, 0, 0, .08);

      }

      &:hover {
        > ol {
          display: block;background: rgb(248, 248, 248);
          color: rgb(51, 51, 51);

          > li {
            height: 40px;line-height: 40px;text-align: center;
            border-bottom: 1px solid #eee;cursor: pointer;z-index: 999;

            &:hover {
              font-weight: bold;color: #1f2c5c;z-index: 999 !important;
            }
          }
        }
      }

    }
  }
}

.nav_con {
  width: 1212px;min-height: 300px; z-index: 990;
  position: absolute;
}

.nav_index {
  width: 1212px;position: absolute;display: flex;
}


</style>
